<template>
  <div>
    <n-card :bordered="false" class="mt-4 proCard">
      <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
      </BasicForm>

      <BasicTable
        :columns="columns"
        :request="loadDataTable"
        :row-key="(row) => row.id"
        ref="actionRef"
        @update:checked-row-keys="onCheckedRow">
        <template #action>
          <TableAction/>
        </template>
      </BasicTable>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
import {inject, reactive, ref} from 'vue';
import {useDialog, useMessage} from 'naive-ui';
import {BasicTable, TableAction} from '@/components/Table';
import {BasicForm, FormSchema, useForm} from '@/components/Form';
import {columns} from './columns';
import {useRouter} from 'vue-router';
import {getUsageList} from "@/api/statistic/usage";

const reloadPage = inject('reloadPage') as Function;

const schemas: FormSchema[] = [
  {
    field: 'name',
    component: 'NInput',
    label: '姓名',
    componentProps: {
      placeholder: '请输入姓名',
      onInput: (e: any) => {
        searchForm.value.name = e;
      },
    },
  },
  {
    field: 'dept',
    component: 'NInput',
    label: '部门',
    componentProps: {
      placeholder: '请输入部门',
      onInput: (e: any) => {
        searchForm.value.dept = e;
      },
    },
  },
  {
    field: 'telephone',
    component: 'NInput',
    label: '手机号',
    componentProps: {
      placeholder: '请输入手机号码',
      onInput: (e: any) => {
        searchForm.value.telephone = e;
      },
    },
  },
  {
    field: 'model',
    component: 'NSelect',
    label: '模型',
    componentProps: {
      placeholder: '请选择模型',
      options: [
        {
          label: '全部',
          value: 'ALL',
        },
        {
          label: 'OpenAI GPT-4',
          value: 'GPT',
        },
        {
          label: 'Google Gemini Pro',
          value: 'Gemini',
        },
        {
          label: '文心一言',
          value: 'Wenxin',
        },
        {
          label: 'Baize',
          value: 'Chat',
        },
      ],
      onUpdateValue: (e: any) => {
        searchForm.value.model = e;
      },
    },
  },
];

const router = useRouter();
const message = useMessage();
const actionRef = ref();

const dialog = useDialog();

const defaultValueRef = () => ({
  name: undefined,
  dept: undefined,
  telephone: undefined,
  model: undefined,
});

const searchForm = ref(defaultValueRef())

const params = reactive({
  pageSize: 5,
  name: 'xiaoMa',
});

const [register, { getFieldsValue }] = useForm({
  gridProps: { cols: '1 s:1 s:2 s:3 s:4 s:5' },
  labelWidth: 80,
  showAdvancedButton: false,
  schemas,
});

const loadDataTable = async (params: any) => {
  params = {
    ...params,
    ...searchForm.value,
  }
  const response = await getUsageList(params)
  return response.data;
};

function onCheckedRow(rowKeys: any[]) {
  console.log(rowKeys);
}
function reloadTable() {
  actionRef.value.reload();
}
function handleSubmit(values: Recordable) {
  actionRef.value.updatePage(1);
}

function handleReset(values: Recordable) {
  Object.assign(searchForm.value, defaultValueRef())
}
</script>

<style lang="less" scoped></style>
